<template>
    <Search></Search>
    <div class="container main-box">
        <div class="row" id="search_result">
            <div class="col-xs-12 main-content">
                <Articles :article-list="searchList"></Articles>
            </div>
        </div>
    </div>
</template>
<style>

</style>
<script>
    import Search from './search.vue'
    import Articles from './articles.vue'
    import {search,clearSearch,handleChangeSearch} from '../../vuex/actions'
    export default{
        created(){
            this.clearSearch()
        },
        components:{
            Search,
            Articles,
        },
        methods:{
            handleSearch(isAdd = false){
                this.search(isAdd,this.option)
            },
            handleChange(option){
                this.handleChangeSearch(option)
            }
        },
        vuex:{
            getters:{
                searchList: ({searchList}) => searchList.items,
                option: ({searchList}) => searchList.option,
                isMore: ({searchList}) => searchList.isMore,
                isFetching: ({searchList}) => searchList.isFetching
            },
            actions:{
                search,
                clearSearch,
                handleChangeSearch
            }
        }
    }
</script>
